<template>
    <div class="w-screen box-border p-4 bg-white">
        <div class="product-box" v-for="product in props.productList" :key="product.id">
            <img class="img" :src="product.img" alt="" />
            <div class="detail">
                <p class="title">{{ product.name }}</p>

                <div class="bottom">
                    <p class="price text-red-600">¥{{ product.price }}</p>
                    <p class="text-gray-300">x{{ product.count }}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
interface Iproduct {
    id: number
    img: string
    name: string
    price: number
    count: number
}

interface IproductInfo {
    productList: Iproduct[]
}

const props = defineProps<IproductInfo>()
</script>

<style lang="less">
@primary-color: #d81e06;

.product-box {
    margin: 32px auto;
    display: flex;
    width: 686px;
    border-radius: 16px;
    background-color: #fff;
    overflow: hidden;

    .select-box {
        align-self: center;
    }

    .img {
        width: 240px;
        height: 240px;
        border-radius: 16px;
    }

    .detail {
        margin-left: 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .price {
            font-size: 40px;
            color: @primary-color;
        }

        .bottom {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
</style>
